// 按钮尺寸
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  border-radius: $border-radius;
}

// 按钮类型
@mixin button-style($background,
  $border,
  $color,
  $hover-background: lighten($background, 7.5%),
  $hover-border: lighten($border, 7.5%),
  $hover-color: $color) {

  background-color: $background;
  border-color: $border;
  color: $color;

  &:hover {
    background-color: $hover-background;
    border-color: $hover-border;
    color: $hover-color;
  }

  &:focus,
  &[focus] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba($hover-background, 0.5);
  }

  &:disabled,
  &[disabled] {
    color: $color;
    background: $background;
    border-color: $border;
  }
}

// 水平垂直Menu
@mixin menu($horizontal: true) {
  @if $horizontal {
    flex-direction: row;

    .menu-item {
      border-bottom: $menu-item-active-border-width solid transparent;

      &:hover,
      &:focus {
        text-decoration: none;
      }

      &.active,
      &:hover {
        color: $menu-item-active-color;
        border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
      }

      &.disabled,
      &[disabled] {
        color: $menu-item-disabled-color;
        cursor: not-allowed;
        border-bottom: none;

        >* {
          pointer-events: none;
        }
      }
    }

    .sub-menu {
      position: relative;

      .sub-menu-title {
        display: flex;
        align-items: center;
      }

      .arrow-icon {
        transition: transform .25s ease-in-out;
        margin-left: 3px;
      }

      &:hover {
        .arrow-icon {
          transform: rotate(180deg);
        }
      }

      .sub-menu-item {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        background: $white;
        padding-left: 0;
        width: 100%;
        white-space: nowrap;
        text-align: center;
        box-shadow: $submenu-box-shadow;
        list-style: none;
        z-index: 100;

        .menu-item {
          color: initial;

          &.active,
          &:hover {
            color: $menu-item-active-color;
            border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
          }

          &.disabled,
          &[disabled] {
            color: $menu-item-disabled-color;
            border-bottom: none;
          }
        }
      }
    }
  }

  @else {
    flex-direction: column;

    .menu-item {
      border-left: $menu-item-active-border-width solid transparent;

      &:hover,
      &:focus {
        text-decoration: none;
      }

      &.active,
      &:hover {
        color: $menu-item-active-color;
        border-left: $menu-item-active-border-width solid $menu-item-active-color;
      }

      &.disabled,
      &[disabled] {
        color: $menu-item-disabled-color;
        cursor: not-allowed;
        border-left: none;

        >* {
          pointer-events: none;
        }
      }
    }

    .sub-menu {
      position: relative;

      .sub-menu-title {
        display: flex;
        align-items: center;
      }

      .arrow-icon {
        transition: transform .25s ease-in-out;
        margin-left: 3px;
      }

      .sub-menu-item {
        background: $white;
        padding-left: 0;
        white-space: nowrap;
        list-style: none;

        .menu-item {
          color: initial;
          border-left: none;

          &.active,
          &:hover {
            color: $menu-item-active-color;
          }

          &.disabled,
          &[disabled] {
            color: $menu-item-disabled-color;
          }
        }
      }
    }

    .sub-menu-open {
      .arrow-icon {
        transform: rotate(180deg);
      }
    }
  }
}

// zoom-in动画
@mixin zoom-in-animation($direction: 'top', $scaleBegin: scaleY(0), $scaleEnd: scaleY(1), $transformOrigin: center top) {
  .zoom-in-#{$direction}-enter {
    opacity: 0;
    transform: $scaleBegin;
  }

  .zoom-in-#{$direction}-enter-active {
    opacity: 1;
    transform: $scaleEnd;
    transition: all .3s cubic-bezier(0.23, 1, 0.32, 1) .1s;
    transform-origin: $transformOrigin;
  }

  .zoom-in-#{$direction}-exit {
    opacity: 1;
  }

  .zoom-in-#{$direction}-exit-active {
    opacity: 0;
    transform: $scaleBegin;
    transition: all .3s cubic-bezier(0.23, 1, 0.32, 1) .1s;
    transform-origin: $transformOrigin;
  }

  .zoom-in-#{$direction}-exit-done {
    opacity: 0;
    transform: $scaleEnd;
  }
}

// zoom-out动画
@mixin zoom-out-animation($direction: 'top', $outScale: scaleY(0), $transformOrigin: center top) {
  .zoom-out-#{$direction}-enter {
    opacity: 1;
  }

  .zoom-out-#{$direction}-enter-active {
    opacity: 0;
    transform: $outScale;
    transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: $transformOrigin;
  }

  .zoom-out-#{$direction}-enter-done {
    display: none;
  }
}

// input尺寸
@mixin input-size($padding-y: $input-padding-y,
  $padding-x: $input-padding-x,
  $font-size: $input-font-size,
  $border-radius: $input-border-radius,
  $font-weight: $input-font-weight,
  $line-height: $input-line-height,
  $font-family: $input-font-family) {
  padding: $padding-y $padding-x;
  font-weight: $font-weight;
  font-size: $font-size;
  font-family: $font-family;
  line-height: $line-height;
  border-radius: $border-radius;
}

// input的前后缀样式
@mixin input-prefix-suffix($prefix-or-suffix: 'prefix', $size: 'default') {
  display: flex;
  align-items: center;
  border: $input-border-width solid $input-border-color;
  background-color: $input-prefix-suffix-bg;
  color: $input-prefix-suffix-color;
  white-space: nowrap;
  cursor: default;

  @if $prefix-or-suffix =='prefix' {
    border-right: 0;
    border-top-left-radius: $input-border-radius;
    border-bottom-left-radius: $input-border-radius;
  }

  @else {
    border-left: 0;
    border-top-right-radius: $input-border-radius;
    border-bottom-right-radius: $input-border-radius;
  }

  @if $size=='default' {
    padding: $input-padding-y $input-padding-x;
  }

  @else if $size=='sm' {
    padding: $input-padding-y-sm $input-padding-x-sm;
  }

  @else {
    padding: $input-padding-y-lg $input-padding-x-lg;
  }
}

// 文字超出省略号
@mixin ellipse() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin flex-center($flex-direction: row) {
  display: flex;
  flex-direction: $flex-direction;
  justify-content: center;
  align-items: center;
}